<!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">

    <style type="text/css">
    .shadow {
      -moz-box-shadow: 0px 0px 3px #000;
      -webkit-box-shadow: 0px 0px 3px #000;
      box-shadow: 0px 0px 3px #000;
      /* For IE 8 */
      -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000')";
      /* For IE 5.5 - 7 */
      filter: progid:DXImageTransform.Microsoft.Shadow(Strength=4, Direction=135, Color='#000000');
    }

    .blur {
                filter: url(#A); /* firefox uses SVG filters */
                filter: progid:DXImageTransform.Microsoft.Blur(pixelradius=10); /* IE specific */

        -webkit-filter: blur(2px);
           -moz-filter: blur(2px);
            -ms-filter: blur(2px);
             -o-filter: blur(2px);
                filter: blur(2px);
                position:absolute;
                z-index:2;
    }
    .blur_top{
      position:absolute;z-index:4; margin:25px;
    }
    </style>
    <svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
            <filter id="A">
              <feGaussianBlur stdDeviation="2" />
            </filter>
          </svg>
  </head>
  <body>
    <h1>Hello, world!</h1>

    <div style="width:80%; border:1px solid #E1DFE4; margin:10px; background:#F1EFF4;" class="shadow">
      <div style="margin:10px; ">
        <div class="row-fluid">
          <div class="span8" style="min-height:300px;">
            <img class="img-rounded blur" src='img/tube.jpg' alt='' width="300">
            <img src='img/tube.jpg' alt='' width="250" class="blur_top">
          </div>
          <div class="span4">
          <div class="blur">
            <img class="img-rounded blur" src='http://placedog.com/400/200'; alt=''></div>
          </div>
        </div>
        <div class="row-fluid" style="margin-top:20px">
          <div class="span4">
            <div style="width:100%; border:1px solid black; position:static;">
              <img class="img-rounded blur" src='http://placedog.com/400/200' width='300'>
              <img class="img-rounded blur_top" src='http://placedog.com/400/200' width="200" alt=''>
              fdsdsfdds
            </div>
          </div>
          <div class="span4"><img class="img-rounded blur" src='http://placedog.com/400/200' alt=''></div>
          <div class="span4"><img class="img-rounded blur" src='http://placedog.com/400/200' alt=''></div>
        </div>
      </div>
      <div style="background:#86B4C4; color:white">
        <div class="row-fluid">
        <div class="span8">My awesome list</div>
        <div class="span4" style="text-align:right;">Icons</div>
      </div>
      <input type="submit" onClick="javascript:hello();"/>
    </div>

    <script src="http://code.jquery.com/jquery.js"></script>
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>